<template>
  <el-empty v-if="!!emptyText" :style="calcStyleAndWidth" :description="emptyText">
  </el-empty>
  <div v-else-if="!hidden"
       :class="[calcClass, 'yv-split',  hiddenSplit?'hidden-split':'']"
       :style="calcStyleAndWidth">
    <split :direction="direction === 'vertical'?'vertical':'horizontal'" :firstAreaDefaultSize="firstAreaDefaultSize">
      <split-area :size="defaultSize" class="yv-split-area">
        <div class="split-header" v-if="!!title1 || collapse1">
          <div class="title" v-if="!!title1">{{ title1 }}</div>
          <div class="close" v-if="!!collapse1">
            <el-icon class="icon-edit">
              <Close/>
            </el-icon>
          </div>
        </div>
        <template v-for="(item,itemIdx) in vjson.items[0].items" :key="item.id">
          <component :is="getRuntimeCmp(item)"
                     :vjson="item"
                     :vcxt="vcxt"
                     :dialog-scope="dialogScope"
                     :parent-list="vjson.items[0].items"
                     :index-of-parent-list="itemIdx"
                     :parent-component="vjson"/>
        </template>
      </split-area>
      <split-area :size="100 - defaultSize" class="yv-split-area">
        <div class="split-header" v-if="!!title2 || collapse2">
          <div class="title" v-if="!!title2">{{ title2 }}</div>
          <div class="close" v-if="!!collapse2">
            <el-icon class="icon-edit">
              <Close/>
            </el-icon>
          </div>
        </div>
        <template v-for="(item,itemIdx) in vjson.items[1].items" :key="item.id">
          <component :is="getRuntimeCmp(item)"
                     :vjson="item"
                     :vcxt="vcxt"
                     :dialog-scope="dialogScope"
                     :parent-list="vjson.items[1].items"
                     :index-of-parent-list="itemIdx"
                     :parent-component="vjson"/>
        </template>
      </split-area>
    </split>
    <div style="width: 0;height: 0;"></div>
  </div>
</template>

<script>
import WebVjsonMix from "../WebVjsonMix"
import _ from "lodash"
import {Split} from "../../Defaults"
import {Edit, Close} from '@element-plus/icons-vue'

export default {
  mixins: [WebVjsonMix],
  components: {
    Edit, Close
  },
  data() {
    const vjson = _.defaults(this.vjson, Split)

    return {
      emptyText: vjson.emptyText,
      hidden: vjson.hidden,
      direction: vjson.direction,
      defaultSize: vjson.defaultSize ?? 50,
      cls: vjson.cls,
      items: vjson.items,
      hiddenSplit: vjson.hiddenSplit ?? false,
      firstAreaDefaultSize: vjson.firstAreaDefaultSize,
      title1: vjson.title1,
      title2: vjson.title2,
      collapse1: vjson.collapse1,
      collapse2: vjson.collapse2,
    }
  },
  watch: {
    direction: {
      handler() {
        debugger
      }
    }
  },
  methods: {}
}
</script>
<style lang="less">
.yv-split > .split {
  width: 100%;

  .split-header {
    position: relative;
    padding-top: 5px;

    .title {
      padding-left: 10px;
      font-size: 14px;
      font-weight: bold;
    }

    .close {
      position: absolute;
      right: 0;
      top: 3px;
      border-radius: 12px;
      width: 24px;
      height: 24px;
      text-align: center;
      padding-top: 1px;
      border: 1px solid rgba(0, 0, 0, 0);
      cursor: pointer;

      .el-icon {
        font-size: 14px;
      }

      &:hover {
        border: 1px solid #d8d8d8;
      }
    }
  }

  .split-vertical > .yv-row-container {
    height: 100%;
  }

  .split-horizontal > .yv-row-container {
    height: 100%;
  }

  & > .yv-split-area {
    overflow: hidden;
  }
}

.hidden-split.splitpanes--vertical > .splitpanes__splitter {
  display: none;
}

.hidden-split.splitpanes--horizontal > .splitpanes__splitter {
  display: none;
}
</style>